<script setup lang="ts">

</script>

<template>
  <div class="data_wrapper">
    <h2 class="title">蓝名网，绽放域名光彩</h2>
    <h3 class="subtitle">让域名创造更多价值</h3>

    <div class="data_box">
      <ul class="clear">
        <li>
          <p class="num"><span><strong class="number1">90</strong>万</span>+</p>
          <p class="desc">用户累计人数</p>
        </li>
        <li>
          <p class="num"><span><strong class="number2">70</strong></span>%</p>
          <p class="desc">每天域名预定数量占全球抢注</p>
        </li>
        <li>
          <p class="num"><span><strong class="number3">1000</strong>万</span>+</p>
          <p class="desc">累计域名成交量</p>
        </li>
        <li>
          <p class="num"><span><strong class="number4">800</strong>万</span>+</p>
          <p class="desc">一口价挂售量突破</p>
        </li>
        <li>
          <p class="num"><span><strong class="number5">17000</strong></span>个</p>
          <p class="desc">一口价单日成交量突破数</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.data_wrapper{
  width: 100%;
  padding: 50px 0;
  background: url(/imgs/index/map_animation.png) no-repeat center center;
  background-size: cover;
  height: 594px;
}

.data_wrapper h2.title{
  margin-bottom: 15px;
  line-height: 1;
  font-size: 28px;
  color: #fff;
  text-align: center;
  font-weight: 400;
}

.data_wrapper h3.subtitle{
  line-height: 1;
  color: #828897;
  text-align: center;
  font-weight: normal;
}

.data_box{
  width: 1200px;
  margin: 0 auto;
}

.data_box ul{
  padding: 50px 760px 24px 0;
}

.data_box li{
  float: left;
  width: 200px;
  margin-bottom: 50px;
}

.data_box li p.num{
  margin-bottom: 15px;
  line-height: 1;
  font-size: 30px;
  color: #037CFF;
}

.data_box li p.num span{
  line-height: 1;
  color: #fff;
  font-size: 36px;
  vertical-align: top;
}

.data_box li p.num span strong{
  font-weight: normal;
}

.data_box li p.desc{
  color: #828897;
}
</style>